<template>
  <div class="p-2">
    <div class="p-3 !rounded-lg bg-white">
      <el-form
        :inline="true"
        :model="formInline"
        class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
      >
        <el-form-item label="关键字">
          <el-input
            v-model="formInline.user"
            placeholder="搜索反馈ID、用户名"
            style="width: 240px"
            clearable
          />
        </el-form-item>
        <el-form-item label="反馈类型">
          <el-input
            v-model="formInline.code"
            placeholder="反馈类型"
            style="width: 240px"
            clearable
          />
        </el-form-item>
        <el-form-item label="问题分类">
          <el-input
            v-model="formInline.age"
            placeholder="问题分类"
            style="width: 240px"
            clearable
          />
        </el-form-item>
        <el-form-item label="处理状态">
          <el-input
            v-model="formInline.weight"
            placeholder="处理状态"
            style="width: 240px"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="grid grid-cols-3 gap-6 mb-6 mt-6">
      <div class="bg-white !rounded-lg p-6 flex items-center justify-between">
        <div>
          <p class="text-sm text-gray-500 mb-1">今日投诉量</p>
          <p class="text-2xl font-semibold text-gray-900">2,461</p>
          <p class="text-xs text-gray-500 mt-1">
            较上月 <span class="text-green-500">+12.5%</span>
          </p>
        </div>
        <div
          class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center"
        >
          <i class="fas fa-paw text-primary" />
        </div>
      </div>
      <div class="bg-white !rounded-lg p-6 flex items-center justify-between">
        <div>
          <p class="text-sm text-gray-500 mb-1">今日建议量</p>
          <p class="text-2xl font-semibold text-gray-900">126</p>
          <p class="text-xs text-gray-500 mt-1">
            较上月 <span class="text-red-500">+5.2%</span>
          </p>
        </div>
        <div
          class="w-10 h-10 rounded-full bg-yellow-50 flex items-center justify-center"
        >
          <i class="fas fa-syringe text-yellow-500" />
        </div>
      </div>
      <div class="bg-white !rounded-lg p-6 flex items-center justify-between">
        <div>
          <p class="text-sm text-gray-500 mb-1">待处理反馈</p>
          <p class="text-2xl font-semibold text-gray-900">89</p>
          <p class="text-xs text-gray-500 mt-1">
            较上月 <span class="text-green-500">-8.3%</span>
          </p>
        </div>
        <div
          class="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center"
        >
          <i class="fas fa-stethoscope text-green-500" />
        </div>
      </div>
    </div>
    <div class="p-5 !rounded-lg bg-white">
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{
          background: 'var(--el-fill-color-light)',
          color: 'var(--el-text-color-primary)'
        }"
      >
        <el-table-column prop="id" label="反馈ID" />
        <el-table-column prop="user" label="反馈用户" />
        <el-table-column prop="type" label="反馈类型" />
        <el-table-column prop="class" label="问题分类" />
        <el-table-column prop="status" label="处理状态">
          <template #default="{ row }">
            <span
              v-if="row.status == 0"
              class="px-2 py-1 text-xs font-medium text-green-700 bg-green-50 !rounded-full"
              >已处理</span
            >
            <span
              v-if="row.status == 1"
              class="px-2 py-1 text-xs font-medium text-yellow-700 bg-yellow-50 !rounded-full"
              >处理中</span
            >
            <span
              v-if="row.status == 2"
              class="px-2 py-1 text-xs font-medium text-gray-700 bg-gray-50 !rounded-full"
              >待处理</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="time" label="提交时间" />
        <el-table-column label="操作" fixed="right" width="250">
          <template #default="scope">
            <div class="flex">
              <span
                class="pr-3 text-sm text-primary hover:text-primary-dark whitespace-nowrap !rounded-button"
                @click="onDetail(scope.row)"
                >查看详情</span
              >
              <span
                class="pr-3 text-sm text-primary hover:text-red-700 whitespace-nowrap !rounded-button"
                @click="editChange(scope.row)"
                >审批</span
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pt-5 pr-2 pb-2" style="display: flex; justify-content: right">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          background
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 详情 -->
    <Detail v-if="isDetail" :open="isDetail" @detailChange="detailChange" />
    <!-- 审批 -->
    <Edit v-if="isEdit" :open="isEdit" @editChange="editChange" />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { Action } from "element-plus";
import Detail from "./detail.vue"; // 详情
import Edit from "./edit.vue"; // 编辑
// 表格数据
const tableData = reactive([
  {
    id: "23134",
    user: "王鸿运",
    type: "投诉",
    class: "设备故障",
    status: 0, // 已处理0 处理中1 待处理2
    time: "2025-05-05"
  },
  {
    id: "23134",
    user: "王鸿运",
    type: "投诉",
    class: "设备故障",
    status: 1, // 已处理0 处理中1 待处理2
    time: "2025-05-05"
  },
  {
    id: "23134",
    user: "王鸿运",
    type: "投诉",
    class: "设备故障",
    status: 2, // 已处理0 处理中1 待处理2
    time: "2025-05-05"
  },
  {
    id: "23134",
    user: "王鸿运",
    type: "投诉",
    class: "设备故障",
    status: 1, // 已处理0 处理中1 待处理2
    time: "2025-05-05"
  },
  {
    id: "23134",
    user: "王鸿运",
    type: "投诉",
    class: "设备故障",
    status: 0, // 已处理0 处理中1 待处理2
    time: "2025-05-05"
  }
]);
// 查询条件
const formInline = ref<any>({
  user: "",
  code: "",
  age: "",
  weight: ""
});
// 查询
const onSubmit = () => {
  console.log("submit!");
};
// 重置
const onReset = () => {
  formInline.value = {
    user: "",
    code: "",
    age: "",
    weight: ""
  };
};
// 查看详情
const isDetail = ref(false);
// 编辑用户
const isEdit = ref(false);

// 详情
const onDetail = (row: any) => {
  isDetail.value = true;
};
// 详情返回
const detailChange = e => {
  isDetail.value = e;
};
// 编辑
const onEdit = (row: any) => {
  console.log(row, "row");
  isEdit.value = true;
};
// 编辑返回
const editChange = e => {
  console.log(e, "eee");
  isEdit.value = e;
};

// 默认调用
onMounted(() => {
  onSubmit();
});
</script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
